<template>
    <div class="login-container">
      <div class="login-box">
        <div class="logo-area">
          <img src="../../../../public/780.png" alt="Logo">
        </div>
        <div class="form-area">
          <h2>ESM平台</h2>
          <div class="Central" >
            <div class="center">
                <el-form
            ref="formRef"
            :rules="rules"
            label-width="auto"
            :model="formLabelAlign"
            style="width: 600px"
            >
           <el-form-item label="账号名"  prop="username">
                <el-input v-model="formLabelAlign.username" />
            </el-form-item>
            <el-form-item label="手机号"  prop="phone">
                <el-input v-model="formLabelAlign.phone" />
            </el-form-item>
            <el-form-item label="密码"  prop="password">
                <el-input v-model="formLabelAlign.password" />
            </el-form-item>
            <el-form-item label="重复输入密码"  prop="password2">
                <el-input v-model="formLabelAlign.password2" />
            </el-form-item>
            
            </el-form>
            </div>
            
          
          <div class="center">
            <el-form-item>
                <el-button type="primary" @click="handleReset">注册账号</el-button>
                <el-button @click="handleBack">返回登录</el-button>
           </el-form-item>
          </div>
        </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { reactive , ref } from 'vue'
import  type { FormInstance , FormRules } from 'element-plus'
import type { user } from '../../type/user';
import {user_Register} from '../../http/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';

const formRef = ref<FormInstance>()
const router= useRouter();


const rules = reactive<FormRules<user>>({
  username: [
    { required: true, message: '请输入账号名', trigger: 'blur' },
    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 11, max: 11, message: '长度为11位', trigger: 'blur' },
  ],
})
const formLabelAlign = reactive<user&{password2:string}>({
  username: '',
  password: '',
  phone: '',
  password2: ''
})



const handleReset=async()=>{
  if(!formRef.value) return
    await formRef.value.validate(async (valid,fields)=>{
        if(valid){
          if (formLabelAlign.password !== formLabelAlign.password2) {
          ElMessage.error('两次输入密码不一致')
          return
        }
          let info:user={
            username:formLabelAlign.username,
            password:formLabelAlign.password,
            phone:formLabelAlign.phone
          }
            const result =await user_Register(info)
            if(result.data?.sessionToken){
              ElMessage.success('注册成功')
              router.push('/login')
            }else {
          // 根据后端返回的错误信息显示
          const errorMsg = result.data?.message || '注册失败，请稍后重试'
          ElMessage.error(errorMsg)
        }
        }else{
          console.log('验证失败', fields)
          ElMessage.warning('请正确填写表单')
        }
    })
}
function handleBack(){
  router.push('/login')
}

</script>

<style lang="scss" scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: url('../../../../public/bg.jpg') no-repeat center center;
    background-size: cover;
  }

  .login-box {
    display: flex;
    width: 900px;
    height: 500px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .logo-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #b692df, #6a5acd);
    
    img {
      width: 70%;
      height: auto;
    }
  }
  
  .form-area {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    h2 {
      text-align: center;
      margin-bottom: 30px;
      color: #6a5acd;
      font-size: 28px;
    }
  }

  .captcha-container {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .captcha-box {
    flex: 1;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
    
    &:hover {
      background: #e8e8e8;
    }
  }
  
  .el-alert {
    margin-top: 20px;
  }
</style>../../../http/user../../../type/user../../typing/user